<template>
  <div style="width: 1200px;margin: 0 auto">
    <div style="margin-top: 30px">
      <!-- 顶部面包屑标识与导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
        <el-breadcrumb-item :to="{ path: '/' }">
          <i class="el-icon-s-promotion"></i> 首页
        </el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/sys-user/pet/pet-management'}">宠物领养</el-breadcrumb-item>
        <el-breadcrumb-item>领取小可爱</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div>
      <h1 style="text-align: left;margin-left: 30px">{{pet.petName}}</h1>
      <el-divider></el-divider>
      <div style="width: 1200px;">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-card>
              <el-carousel :interval="4000" arrow="never">
                <el-carousel-item v-for="(petPic, index) in petPicArr" :key="index">
                  <img :src="'/images/animal/' + petPic.picUrl" alt="Pet Image">
                </el-carousel-item>
              </el-carousel>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card>
            <div style="text-align: left;width: 500px; padding-left: 20px">
              <p>
          <span>
            <i class="fas fa-flag" style="color: #f07057"></i>
          </span>&nbsp;&nbsp;
                <span class="adopt-icon">
            免费领养
          </span>
                <span style="color: #A94442;font-size: 18px;font-weight: bold">
            【免费领养不要相信任何费用先付的骗术】
          </span>
              </p>
              <p>
          <span>
            <i class="fas fa-paw" style="color: #f07057"></i>
          </span>&nbsp;&nbsp;
                <span style="width: 30px">
            小主名称:{{pet.petName}}
          </span>
              </p>
              <p>
          <span>
            <i class="fas fa-dragon" style="color: #f07057"></i>
          </span>&nbsp;&nbsp;
                <span style="width: 30px">
            小主类型:{{pet.petType}}
          </span>
              </p>
              <p>
          <span>
            <i class="fas fa-dice" style="color: #f07057"></i>
          </span>&nbsp;
                <span style="width: 30px">
            小主性别:{{pet.sex}}
          </span>
              </p>
              <p>
          <span>
            <i class="fas fa-birthday-cake cake-icon" style="color: #f07057"></i>
          </span>&nbsp;&nbsp;
                <span style="width: 30px">
            小主生日:{{pet.birthday}}
          </span>
              </p>
              <p>
                <span>
            <i class="fas fa-cookie" style="color: #f07057"></i>
          </span>&nbsp;&nbsp;
                <span style="width: 30px">
            小主描述:{{pet.remark}}
          </span>
              </p>
              <p>
          <span>
            <i class="fas fa-map-marker-alt location-icon" style="color: #f07057"></i>
          </span>&nbsp;&nbsp;
                <span style="width: 30px">
            小主地址:佛山祖庙达内中心御兽阁
          </span>
              </p>
              <p>
          <span>
            <i class="fas fa-phone phone-icon" style="color: #f07057"></i>
          </span>&nbsp;&nbsp;
                <span style="width: 30px">
            联系电话:18888888888
          </span>
                <span>{{ userTelephone }}</span>
              </p>
            </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      <div>
        <div style="text-align: left;padding-left: 30px;height: 150px;border: 1px solid olive;margin-top: 20px;margin-bottom: 20px">
          <p>特点: 会定点大小便</p>
          <p>备注: 联系我时，请备注来自：御兽阁</p>
          <p style="color: red">
            <i class="fa fa-warning"></i>
            安全提示：请不要相信任何需要金钱交易的无偿领养！例如宠物免费，骗取运费等常见骗术！
          </p>
          <p style="color: orangered;">
            <i class="fa fa-warning"></i>
            举报骗取运费
          </p>
        </div>
        <img src="/images/pet_adopt/weibo.png" alt="" style="margin: 20px">
        <img src="/images/pet_adopt/Qzone.png" alt="" style="margin: 20px">
        <img src="/images/pet_adopt/weixin.png" alt="" style="margin: 20px">
      </div>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      userTelephone: '',
      item:'',
      pet:{},
      petPicArr:[],
    };
  },
  methods: {
    //加载宠物Id
    loadPetId(){
      this.pet.id = this.$route.query.petId;
      let petId = this.pet.id;
      this.loadPetPics(petId);
      this.loadPetInfo(petId);
    },
    //加载宠物详情
    loadPetInfo(petId){
      let url = 'http://localhost:13001/pet/standard?id='+ this.pet.id;
      console.log('url = ' + url);
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.pet = jsonResult.data;
        }
      });
    },
    //加载宠物图片
    loadPetPics(petId){
      let url = 'http://localhost:13001/picture/listByPetId?petId='+ this.pet.id;
      console.log('url = ' + url);
      let localJwt = JSON.parse(localStorage.getItem('localJwt'));
      this.axios
          .create({
            'headers': {
              'Authorization': localJwt.token
            }
          })
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.petPicArr = jsonResult.data;
          console.log(this.petPicArr)
        }
      });
    }
  },
  mounted() {
    this.loadPetId();
  }
}
</script>

<style scoped>
.adopt-icon {
  background: #F0AD4E;
  font-size: larger;
  font-weight: bolder;
  border-radius: 5%;
  color: white;
  padding: 3px;
  height: 30px;
  width: 84px;
}
</style>